<template>
	<view style="padding-bottom: 150rpx;">
		<view class="bg">
			<view>
				<view style="font-size: 34rpx;">
					萌萌安家
				</view>
				<view class="u-margin-top-20">家庭装修就来萌萌安家</view>
				<view class="u-margin-top-40 u-font-weight title ">上门设计</view>
				<view class="u-margin-top-40">专业设计师为您营造【理想家】</view>
			</view>

			<view style="margin-top: 40rpx;">
				<u-image :src="$ftpUrl('/commonDesign.png')" width="240" height="240" border-radius="40"></u-image>
			</view>
		</view>


		<view class="u-padding-30 shadow" style="width: 700rpx;margin: auto;">
			<u-form :model="form" ref="uForm">
				<u-form-item label="姓名" prop="realname" label-width="200">
					<u-input v-model="form.realname" input-align="right" placeholder="请输入姓名"/>
				</u-form-item>
				<u-form-item label="联系电话" prop="mobile" label-width="200">
					<u-input v-model="form.mobile" input-align="right" maxlength="11" placeholder="请输入联系电话"/>
				</u-form-item>
				<u-form-item label="联系地址" prop="address" label-width="200" @click="open">
					<u-input v-model="form.address" input-align="right" placeholder="请输入联系地址" type="select" disabled  @click="open"/>
				</u-form-item>
				<u-form-item label="详细地址" prop="detailAddress" label-width="200">
					<u-input v-model="form.detailAddress" input-align="right" placeholder="请输入详细联系地址" />
				</u-form-item>
				
				<u-form-item :border-bottom="false" label="需求备注" label-width="200" label-position="top" prop="remark">
					<u-input placeholder="请输入备注" type="textarea" v-model="form.remark"></u-input>
				</u-form-item>
				
				
			</u-form>
			
			
		</view>


		<view class="u-padding-30">
			<u-section :arrow="false" :right='false' title="图文案例" lineColor="#FF5D39" fontSize="34"></u-section>
			<wr-article  ID="18"></wr-article>
		</view>



		<view class="bottomFix">
			<u-button @click="add" shape="circle" :custom-style="{background:'#FF5D39',color:'#fff',width:'500rpx',}">
				提交设计</u-button>

		</view>
		
		


<u-toast ref="uToast" />
		<!-- <image :src="$ftpUrl('/goDesignBook.png')" class="rightfix"></image> -->


	</view>
</template>

<script>
	import payway from '@/common/wxpay.js';
	
	import rules from "@/common/rule.js";
	export default {
		
		data() {
			return {

				
				user: {},
				
		
				form: {
					mobile: "",
					realname: "",
					remark: "",
					address:"",
					detailAddress:''
					
				},
				rules: rules,
				
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(options) {

			this.$u.api.userInfo().then(res => {
				this.user = res;
			})



			

		},
		methods: {
			
			open(){
				uni.chooseLocation({
					success:(res=>{
						this.form.address=res.name
						console.log(res)
					})
				})
			},
			add() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.$u.post('/indent/visit', {
							realname:this.form.realname,
							mobile:this.form.mobile,
							remark:this.form.remark,
							address:this.form.address+this.form.detailAddress
						}).then(res => {
                                 this.$refs.uToast.show({
									title: '提交成功,请耐心等候客服联系~',
									type: 'success',
									back:true
								})
						}).catch(err => {
				     	})
					} else {
						console.log('验证失败');
					}
				});
			},
			
		}
	}
</script>

<style>
	.bg {
		width: 750rpx;
		padding: 20rpx 20rpx 20rpx 50rpx;
		background: linear-gradient(to top, #FFCB87, #FF9D62);
		height: 400rpx;
		color: #fff;
		display: flex;
		justify-content: space-between;
	}

	.title {
		font-size: 50rpx;
		letter-spacing: 10rpx;

	}

	.u-form-item__message {
		text-align: right;
	}

	.list {
		display: flex;
		justify-content: space-between;
	}


	.new {
		background: #FFFFFF;
		margin: 20rpx auto;
		width: 690rpx;
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.scroll-view {
		height: 300rpx;
		position: relative;
		overflow: hidden;

	}
</style>
